<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>角色管理</title>
		<link rel="stylesheet" href="../../plugins/layui/css/layui.css" media="all">
		<link rel="stylesheet" href="../../common.css">
		<style>
			
		</style>
	</head>
	<body>
		<div class="layui-fluid iframe-top" id="role">
			<div class="layui-row">
				<button class="layui-btn layui-btn-normal" data-type="addrole">添加角色</button>
			</div>
			<table id="layui-table" lay-filter="layui-action"></table>
		</div>
		<script src="../../plugins/layui/layui.js"></script>
		<script src="../../plugins/vue.min.js"></script>
		<script src="../../common.js"></script>
		<script>
		
			var vm = new Vue({
				el: "#role",
				data: {
					baseData: [],
					selected: '1',
					formflag:false
				},
				created() {
					layui.use(['jquery', 'layer', 'table','ajaxmod','form','verifymod'], function() {
						var $ = layui.jquery,
							table = layui.table,
							laydate = layui.laydate,
							form = layui.form,
							ajaxmod = layui.ajaxmod,
							verifymod = layui.verifymod;
							
						table.render({
							elem: '#layui-table',
							url: '/demo/table/user/',
							page: true,
							limit: 16,
							limits: [10, 15, 20, 25, 30],
							height: 'full-80',
							id: 'tableReload',
							loading: true,
							method: 'get',
							where: {token: cookie.get('usertoken')},
							request: {
								
							},
							response: {
//							   statusCode: 200,
//							   msgName: 'message',
							},
							cols: [
								[ 
									{
										field: 'username',
										title: '角色名称',
										width: '70%',
									}, {
										fixed: 'right',
										title: '操作',
										width: '30%',
										align: 'center',
										toolbar: '#barAction'
									} 
								]
							],
							done: function(res, curr, count) {}
						});

						// 操作事件
						table.on('tool(layui-action)', function(obj) {
							var data = obj.data; 
							//获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
							var layEvent = obj.event; 
							//获得当前行 tr 的DOM对象
							var tr = obj.tr; 
							if(layEvent === 'edit') {
								layer.open({
						    		type: 1,
						    		title: "编辑权限",
						    		content: "str",
						    		skin: 'demo-class',
						    		shade: 0.3,
						    		shadeClose: true,
						    		area: ['800px','700px'],
						    		offset: '60px',
						    		move: false,
						    		btn: ['确认','取消'],
						    		// 确认
						    		yes: function (index,layero) {
						    			var datas = $("#updaterole").serialize();
							    		ajaxmod.layuiPost("/api/sys/account/UpdateRole",datas, function (res) {
											if(res.success){
												layer.closeAll();
												$(".layui-laypage-btn").click();
												layer.msg('操作成功', {icon: 1});
							                }else{
							                	layer.msg(res.message, {icon: 2});
							                }
										})
							    		return false;
						    		},
						    		// 取消
						    		btn2: function (index,layero) {
						    			
						    		},
						    		success: function (layero,index) {
						    			form.render();
						    		},
						    	})
								
							} else if(layEvent === 'delete') {
								layer.confirm('确定删除该角色么?', function(index) {
									var datas = $.param({Id: data.id});
						    		ajaxmod.layuiPost("/api/sys/account/DeleteRole",datas, function (res) {
										if(res.success){
											layer.closeAll();
											$(".layui-laypage-btn").click();
											layer.msg('操作成功', {icon: 1});
						                }else{
						                	layer.msg(res.message, {icon: 2});
						                }
									})
						    		return false;
								});
							}
						});
						
						// 字段校验
						// form.verify(verifymod);

						// 触发函数
						var active = {
							addrole: function() {
								layer.open({
						    		type: 1,
						    		title: "添加角色",
						    		content: "str",
						    		skin: 'demo-class',
						    		shade: 0.3,
						    		shadeClose: true,
						    		area: ['800px','700px'],
						    		offset: '60px',
						    		move: false,
						    		btn: ['确认','取消'],
						    		// 确认
						    		yes: function (index,layero) {
						    			var data = $("#addrole").serialize();	
						    			ajaxmod.layuiPost("/api/sys/account/AddRole",data, function (res) {
											if(res.success){
												layer.closeAll();
												$(".layui-laypage-btn").click();
												layer.msg('操作成功', {icon: 1});
							                }else{
							                	layer.msg(res.message, {icon: 2});
							                }
										})
						    			return false;
						    		},
						    		// 取消
						    		btn2: function (index,layero) {
						    			vm.baseData.robotparts = $("#parts").serializeArray();
						    		},
						    		success: function (layero,index) {
						    			form.render();
						    		},
						    	})
							},
						};

						// 按钮搜索
						$('#role .layui-btn').on('click', function() {
							var type = $(this).data('type');
							active[type] ? active[type].call(this) : '';
						});
					})
				},
			})
		</script>
		<!-- 操作 -->
		<script type="text/html" id="barAction">
			<a 	class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit"><i class="layui-icon">&#xe642;</i>编辑</a>
			<a 	class="layui-btn layui-btn-normal layui-btn-xs" lay-event="delete"><i class="layui-icon">&#xe640;</i>删除</a>
		</script>
	</body>
</html>